<!--
 * @Author: @yzcheng
 * @Date: 2021-03-06 14:45:49
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-03-27 15:10:39
-->
<template>
  <div class="containers">
    <div id="bpmn-view" ref="containerEl"></div>
  </div>
</template>
<script>
import BpmnViewer from 'bpmn-js';
import { mapActions } from 'vuex';
import { toRaw } from 'vue';
export default {
  props: {
    procDefId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      containerEl: null,
      bpmnModeler: null,
      scale: 1,
      // 此变量为预览的xml文件数据，由于行数过多，附在了附件中，使用时，将附件整个复值到currentCanvasXml即可
      currentCanvasXml: ``,
    };
  },
  async mounted() {
    const { procDefId } = this;
    await this.getCurrentCanvasXml({
      procDefId,
      callback: (res) => {
        console.log(res,'res');
        this.currentCanvasXml = res.data;
      },
    });
    await this.previewTemp();
  },
  methods: {
    ...mapActions('flowDefineStore', ['getCurrentCanvasXml']),
    previewTemp() {
      // 避免缓存，每次清一下
      this.bpmnModeler && this.bpmnModeler.destroy();
      this.scale = 1;
      this.bpmnModeler = new BpmnViewer({ container: this.$refs.containerEl });
      const viewer = this.bpmnModeler;
      toRaw(this.bpmnModeler).importXML(this.currentCanvasXml, (err) => {
        if (err) {
          console.log(123123123123);
          console.error(err);
        } else {
          // 只实现预览，核心代码以下两句足够
          const canvas = viewer.get('canvas');
          canvas.zoom('fit-viewport');
          // 以下代码为：为节点注册鼠标悬浮事件
          const eventBus = this.bpmnModeler.get('eventBus');
          const overlays = this.bpmnModeler.get('overlays');
          eventBus.on('element.hover', (e) => {
            console.log(e);
          });
          eventBus.on('element.out', () => {
            overlays.clear();
          });
          //  注册悬浮事件结束
        }
      });
    },
  },
};
</script>
<style lang="scss">
.container {
  .tipBox {
    width: 200px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    padding: 12px;
  }
  .bjs-powered-by {
    display: none;
  }
}
</style>
<style scoped lang='scss'>
/* @import url(); 引入scss类 */

.containers {
  background-color: #ffffff;
  width: 60vw;
  height: 50vh;
  margin: 0 auto;
  #bpmn-view {
    width: 100%;
    height: 100%;
    /deep/ .viewport {
      margin: 0 auto;
    }
    /deep/ #verify_01 {
      background: red;
    }

    /deep/ .highlight-overlay {
      background-color: green; /* color elements as green */
      opacity: 0.4;
      pointer-events: none; /* no pointer events, allows clicking through onto the element */

      z-index: 0;
      position: absolute;
    }
    /deep/ #tiplayer {
      width: 200px;
      height: 200px;
    }

    /deep/ .bjs-powered-by {
      display: none;
    }
  }
  .bjs-powered-by {
    display: none;
  }
}
</style>
